<template>
    <div class="card mb-3 " v-if="steps.length ">
                <slot></slot>    
                <div class="card-body">
                    <ul class="list-group">
                        <li class="list-group-item" v-for="step in steps">
                           <span @dblclick="edit(step)">{{ step.name }}</span> 
                            <span style="float:right">
                                    <i class="fa fa-check " @click="toggle(step)" ></i>
                                    <i class="fa fa-close " @click="remove(step)" >X</i>
                            </span>
                        </li>
                    </ul>
                </div>
            </div>
</template>
<script>
import { Hub } from '../event-bus'
export default {
    props:{
        steps:Array,
        route:String
    },
    methods:{
        toggle(step){
            axios.patch(`${this.route}/${step.id}`,{completion:!step.completion}).then((res)=>{
               step.completion=!step.completion
            })
            
        },
        remove(step){
            axios.delete(`${this.route}/${step.id}`).then((res)=>{
                Hub.$emit('remove',step)
            })
           
        },
         edit(step){
           // 删除当前step
           this.remove(step)
            Hub.$emit('edit',step)//事件总线
        },
    }
}
</script>

